<h2>username:{{name}}</h2>

<div style="margin: 0 auto;width: 540px">
  <button (click)="add()" mat-mini-fab color="" aria-label="Example icon button with a plus one icon">
    <mat-icon>add</mat-icon>
  </button>
  <mat-form-field style="margin-left: 300px" class="example-full-width">
    <mat-label>Search</mat-label>
    <label>
      <input matInput [(ngModel)]="searchMes" (keyup.enter)="search()" placeholder="Ex. tg" value="">
    </label>
  </mat-form-field>
</div>

<table style="margin: 0 auto" mat-table [dataSource]="userList" class="mat-elevation-z8">
  <ng-container matColumnDef="name">
    <th style="width: 100px" mat-header-cell *matHeaderCellDef> Name</th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="gender">
    <th style="width: 100px" mat-header-cell *matHeaderCellDef> gender</th>
    <td mat-cell *matCellDef="let element"> {{element.gender == 0 ? '女' : '男'}} </td>
  </ng-container>
  <ng-container matColumnDef="email">
    <th style="width: 150px" mat-header-cell *matHeaderCellDef> email</th>
    <td mat-cell *matCellDef="let element"> {{element.email}} </td>
  </ng-container>
  <ng-container matColumnDef="phone">
    <th mat-header-cell *matHeaderCellDef> phone</th>
    <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
  </ng-container>
  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef> actions</th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon color="primary" (click)="edit(element)">edit</mat-icon>
      </button>
      <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon color="warn" (click)="delete(element.id)">delete</mat-icon>
      </button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
